<template>
  <div class="formArea">
    <p class="el-area">
      <span>订单搜索:</span>
      <el-select v-model="formData.type">
        <el-option value="1" label="手机号" />
        <el-option value="2" label="订单号" />
      </el-select>
      &nbsp;&nbsp;
      <el-input
        v-model="formData.phone"
        class="ele-input"
        :placeholder="
          formData.type == '0' ? '手机号' : formData.type == '1' ? '订单号' : ''
        "
      />
    </p>
    <p class="el-area">
      <span>门店:</span>
      <el-select v-model="formData.provinceId" @change="getCityListByid">
        <el-option
          v-for="(item, index) in address.provinceList"
          :key="index"
          :value="index"
          :label="item.province.name"
        /></el-select>
      &nbsp;&nbsp;
      <el-select v-model="formData.cityId" @change="getCityInfoByid">
        <el-option
          v-for="(item, index) in address.cityList"
          :key="index"
          :value="index"
          :label="item.city.name"
        />
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="formData.storeId" clearable filterable>
        <el-option value="" label="全部门店" />
        <el-option
          v-for="(item, index) in storelist"
          :key="index"
          :value="item.id"
          :label="item.storeName"
        />
      </el-select>
      &nbsp;&nbsp;
    </p>
    <!-- <p class="el-area">
        <span>订单状态:</span>
        <el-select v-model="formData.state">
          <el-option value="" label="全部订单" />
          <el-option value="101" label="待付款">待付款</el-option>
          <el-option value="201" label="代发货">代发货</el-option>
          <el-option value="302" label="待用户自提">待用户自提</el-option>
          <el-option value="301" label="待用户收货">待用户收货</el-option>
          <el-option value="401" label="使用中">使用中</el-option>
          <el-option value="501" label="待取货">待取货</el-option>
          <el-option value="502" label="待商户收获">待商户收获</el-option>
          <el-option value="503" label="待用户结算">待用户结算</el-option>
          <el-option value="701" label="已关闭">已关闭</el-option>
          <el-option value="801" label="已完成">已完成</el-option>
        </el-select>
        &nbsp;&nbsp;
      </p> -->
    <p class="el-area">
      <span>查询时段:</span>
      <el-date-picker
        v-model="formData.startTime"
        type="datetime"
        placeholder="开始时间"
        default-time="12:00:00"
      />&nbsp;&nbsp;~&nbsp;&nbsp;
      <el-date-picker
        v-model="formData.endTime"
        type="datetime"
        placeholder="结束时间"
        default-time="12:00:00"
      />
      &nbsp;&nbsp;
      <el-button size="mini" plain @click="getTiemWeek">最近七天</el-button>
      <el-button size="mini" plain @click="getTimeMonth">最近三十天</el-button>
    </p>
    <p class="el-area">
      <span />
      <el-button type="primary" @click="searchLoading">筛选</el-button>
    </p>
  </div>
</template>

<script>
import { storeList } from '@/api/customAPI/shop/store'
import {
  address,
  getAddressList,
  getCityInfoByid,
  getCityListByid
} from '@/utils/address'
export default {
  data() {
    return {
      address,
      storelist: [],
      formData: {
        type: '1',
        // 订单搜索（手机号）
        phone: '',
        //  订单商品状态
        state: '',
        // 省id
        provinceId: '',
        // 市id
        cityId: '',
        // 门店id
        storeId: '',
        // 开始时间
        startTime: '',
        // 结束时间
        endTime: ''
      }
    }
  },
  activated() {
    this.$nextTick(() => {
      this.sotreInfo()
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.sotreInfo()
    })
  },
  methods: {
    searchLoading() {
      this.$emit('searchLoading', this.formData)
    },
    async sotreInfo() {
      await storeList({
        province: '',
        city: '',
        area: '',
        searchKey: '',
        page: 1,
        limit: 0
      }).then(result => {
        this.storelist = result.data.data.list
      })
    },
    /** 最近一周 */
    getTiemWeek() {
      this.timeGet(7)
    },
    /** 最近30天 */
    getTimeMonth() {
      this.timeGet(30)
    },
    timeGet(val) {
      const end = new Date()
      const start = new Date(end.getTime() - 3600 * 1000 * 24 * val)
      this.formData.startTime = start
      this.formData.endTime = end
    },
    getAddressList,
    getCityInfoByid,
    getCityListByid
  }
}
</script>

<style lang="scss" scoped>
.formArea {
  width: 100%;
  background: #f3f3f3;
  padding: 10px 30px;
  border-radius: 5px;
}
.formArea > .el-area {
  margin: 30px 0px;
}
.formArea > .el-area > span {
  display: inline-block;
  width: 80px;
}
.formArea > .el-area > .ele-input {
  width: 280px;
}
</style>
